<!DOCTYPE html>
<html lang="en"  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Pet Homepage</title>

    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/home.css}" rel="stylesheet">

  </head>

  <body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">Pet Platform</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item ">
              <a class="nav-link" href="/api/home">Home

              </a>
            </li>
            <li class="nav-item" >
              <a class="nav-link" href="/api/orders">Orders</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="/api/editshop">EditShop<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/api/account">Account</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span th:text="${session.sellerEmail}">...</span>
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="/logout">Logout</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container">

      <div class="row">

        <div class="col-lg-3">

          <h1 th:text="${shop.name}" class="my-4"/>
          <h5 th:text="${shop.address}" class="my-4"/>
          <img style="width:200px" th:src="@{'/uploadfile/'+${shop.mainpic}}" />
          <img style="margin-top:10px;width:200px" th:src="@{/img/2.png}" />

        </div>
        <!-- /.col-lg-3 -->

        <div class="col-lg-9">

          <div class="panel panel-default" style="margin-top: 50px">
            <div class="panel-heading">
              <h3 class="panel-title">
                Manage Shop Info
              </h3>
            </div>
            <div class="panel-body">
              <div class="form-group" >
                <form action="/saveshopinfo" method="POST" enctype="multipart/form-data">
                  <input type="text" class="form-control" name="shopname" th:value="${shop.name}" placeholder="Shop Name">
                  <br>
                  <input type="text" class="form-control" name="address" th:value="${shop.address}" placeholder="Address">
                  <br>
                  <input type="file" class="form-control" name="mainpic">
                  <br>
                  <button id="nameSaveBt" type="submit" class="btn btn-primary btn-lg">Save</button>
                </form>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">
                Manage Pet and Service
              </h3>
            </div>
            <div class="panel-body">
              <table class="table">
                <thead>
                <tr>
                  <th scope="col">id</th>
                  <th scope="col">category</th>
                  <th scope="col">name</th>
                  <th scope="col">picture</th>
                  <th scope="col">price</th>
                  <th scope="col">description</th>
                  <th scope="col">Actions</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="good : ${goods}">
                  <th th:text="${good.id}"/>
                  <td th:text="${good.category}"/>
                  <td th:text="${good.name}"/>
                  <td><a target="_blank" th:href="@{'/uploadfile/'+${good.picture}}">View</a></td>
                  <td th:text="${good.price}"/>
                  <td th:text="${good.description}"/>
                  <td>
                    <button class="edit btn btn-primary" data-toggle="modal" data-target="#myModal">Edit</button>
                    <button class="delete btn btn-primary">Delete</button>
                  </td>
                </tr>

                </tbody>
              </table>
              <button id="addBt" class="btn btn-primary" data-toggle="modal" data-target="#addModal">Add a Pet or Service</button>

              <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 class="modal-title" id="myModalLabel">Edit Pet or Service</h4>
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <form action="/editgoods" method="POST" enctype="multipart/form-data">
                    <div class="modal-body">
                      <input type="hidden" name="id" id="id_edit"/>
                      <select class="form-control"  id="category_edit" name="category">
                        <option value="Pet">Pet</option>
                        <option value="Service">Service</option>
                      </select>
                      <br>
                      <input type="text" class="form-control" name="name" id="name_edit" placeholder="name">
                      <br>
                      <input type="file" class="form-control" name="picture" id="picture_edit" placeholder="picture">
                      <br>
                      <input type="text" class="form-control" name="price" id="price_edit" placeholder="price">
                      <br>
                      <input type="text" class="form-control" name="description" id="description_edit" placeholder="description">
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                      <button type="submit" class="btn btn-primary" id="confirm_edit">Confirm</button>
                    </div>
                    </form>
                  </div>
                </div>
              </div>

              <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h4 class="modal-title" id="myLabel">Add Pet or Service</h4>
                      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <form action="/addgoods" method="POST" enctype="multipart/form-data">
                    <div class="modal-body">
                        <select class="form-control" id="category_add" name="category">
                          <option value="Pet">Pet</option>
                          <option value="Service">Service</option>
                        </select>
                        <br>
                        <input type="text" class="form-control" name="name" id="name_add" placeholder="name">
                        <br>
                        <input type="file" class="form-control" name="picture" id="picture_add" placeholder="picture">
                        <br>
                        <input type="text" class="form-control" name="price" id="price_add" placeholder="price">
                        <br>
                        <input type="text" class="form-control" name="description" id="description_add" placeholder="description">
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                      <button type="submit" class="btn btn-primary" id="confirm_add">Confirm</button>
                    </div>
                    </form>
                  </div>
                </div>
              </div>

            </div>
          </div>

        </div>
        <!-- /.col-lg-9 -->

      </div>
      <!-- /.row -->

    </div>
    <!-- /.container -->

    <!-- Footer -->
    <footer class="py-5 bg-dark">
      <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; Pet Website 2018</p>
      </div>
      <!-- /.container -->
    </footer>

    <!-- Bootstrap core JavaScript -->
    <script th:src="@{/jquery/jquery.min.js}"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>
    <script th:inline="javascript">

        $(".edit").click(function(event){
            var id = $(event.target).parent().prev().prev().prev().prev().prev().prev().html();
            var category = $(event.target).parent().prev().prev().prev().prev().prev().html();
            var name = $(event.target).parent().prev().prev().prev().prev().html();

            var price = $(event.target).parent().prev().prev().html();
            var description = $(event.target).parent().prev().html();
            $("#id_edit").val(id);
            $("#category_edit").val(category);
            $("#name_edit").val(name);
            $("#price_edit").val(price);
            $("#description_edit").val(description)
        });
        $(".delete").click(function(event){
            var id = $(event.target).parent().prev().prev().prev().prev().prev().prev().html();
            $.ajax({
                type:"POST",
                url:"/deletegoods",
                data:{id:id},
                datatype: "json",
                success:function(data){
                    if(data=='OK'){
                        window.location = "/api/editshop";
                    }else{
                        console.log(data)
                        alert("delete goods failed!");
                    }

                },

                error: function(){
                    alert("delete goods failed!");
                }
            });
        });


    </script>
  </body>

</html>
